<template>
		<modal-container v-el:modal title="更新" class="edit-modal">
		<form v-el:submitform @submit.prevent>
			<div>
				<table class="table table-hover">
					<tbody>
						  <tr>
							 <td>商户</td>
							 <td>
								<select name="mchtId" class="form-control" @change="selectRole($event)">
									<option v-for="mcht in collection.mcht" :value="mcht.mchtId" :selected="_mchtselected(mcht.mchtId)">
										{{mcht.mchtName}}-{{mcht.mchtId}}
									</option>
								</select>
							 </td>
						  </tr>
							<tr>
								<td>操作员编号</td>
								<td>
									<input type="text" class="form-control" :value="model.oprId" disabled  name="oprId">
								</td>
							</tr>

							<tr>
								<td>操作员名称</td>
								<td>
									<input type="text" class="form-control" :value="model.oprName"  name="oprName" :maxlength="12">
								</td>
							</tr>
							<tr>
								<td>角色</td>
								<td>
									<select class="form-control" type="text" :options = "roleOptions" v-el:state name="roleIdd" :readonly="collection.role.length==0">
											<option v-for="role in collection.role" :value="role.id.ruleId" :selected="_selected(role.id.ruleId)">
													<!-- {{role.roleName}} -->
									</select>
								</td>
							</tr>
							<tr>
								<td>操作员描述</td>
								<td>
									<input type="text" class="form-control" :value="model.oprDsc" name="dsc" :maxlength="30">
								</td>
							</tr>
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<v-button type="submit" theme="primary">确认</v-button>
				<v-button @click="hide">取消</v-button>
			</div>
		</form>
		</modal-container>

</template>

<script>

	let serialize = require('form-serialize');

	export default {
		props: {
			model: {
			  type: Object,
				default:{}
			}
		},
		data:()=>({
			collection: {
				role: [],
				mchtList: []
			}
		}),
		 watch:{
					'model.brhNo':function(value) {
					let self = this;
					let _data = {
						selbrhId: value
					}
					this.$post({
							url: "/api/v1" + projectName_Url + "/sys/role/query.html",
							data: _data
						}).then(response => {
							self.$set('collection.role', response.content.roleList);
						},error => {
							self.$set('collection.role', []);
						});
					}
		 },
		methods: {
			  init() {
					$(this.$els.modal).modal("show");
				},
		  	hide() {
					$(this.$els.modal).modal("hide");
				},
				selectRole(e) {
					let _data = {
						selbrhId: e.target.value
					}
					let self = this;
					this.$post({
							url: "/api/v1" + projectName_Url + "/sys/role/query.html",
							data: _data
						}).then(response => {
							self.$set('collection.role', response.content.roleList);
						},error => {
							self.$set('collection.role', []);
						});
				},
				_selected(roleId) {
					return (roleId == this.model.roleId);
				},
				_mchtselected(mchtId) {
					return (mchtId == this.model.brhNo);
				},
		    reload() {
					this.$dispatch("table-reload");
				},
				submit(data) {
					let self = this;
					data.oldbrhId = this.model.brhNo;
					self.$post({
						url: "/api/v1" + projectName_Url + "/sys/opr/upd.html",
						data
					}).then(response => {
						let data = {
							title: "操作提示",
							content: "编辑操作成功"
						}
						Midway.alert(data);
						self.hide();
						self.reload();
					}, response => {

					});
				}
	 },
	 ready() {
		 let self = this;
		 $(self.$els.submitform).validate({
			 submitHandler() {
					let form = this.currentForm;
					let _data = serialize(form, {
							hash: true,
						  disabled: true,
						  empty: true
					});
				  self.submit(_data);
			 },
				rules: {
					roleIdd: {
						required: true
					},
					oprName: {
						required: true,
						minlength: 4,
						maxlength: 12
					},
					dsc: {
						maxlength:30
					}
				},
				messages: {
					roleIdd: {
							required: "该机构下无角色"
					},
					oprName: {
							required: "账号为必填项",
							minlength: "账号不少于4个字符",
							maxlength:"账号不多于12个字符"
					},
					des: {
						maxlength:"描述不多于30个字"
					}
				}
		 });
	 }
}
</script>
